<template>
  <div class="global-header">
    <div class="inner">
      <router-link to="/" class="logo">者也2专栏</router-link>
      <ul v-if="!isLogin" class="login-btns">
        <li><router-link to="/login" class="btn">登录</router-link></li>
        <li><router-link to="/login" class="btn">注册</router-link></li>
      </ul>
      <div v-else-if="isLogin && data" class="btn dropdown-wrap">
        <Dropdown :title="`你好 ${data.nickName}`">
          <DropdownItem>
            <router-link to="/create">新建文章</router-link>
          </DropdownItem>
          <DropdownItem>
            <router-link :to="`/column/${data.column}`">我的专栏</router-link>
          </DropdownItem>
          <DropdownItem disabled>
            <a href="#">编辑资料</a>
          </DropdownItem>
          <DropdownItem>
            <a href="#" @click.prevent="handleLogout">退出登录</a>
          </DropdownItem>
        </Dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserStore, type UserDataProps } from "../store/user";
import Dropdown from "./Dropdown.vue";
import DropdownItem from "./DropdownItem.vue";
import createMessage from "./createMessage";

const props = defineProps<{
  isLogin: boolean;
  data: UserDataProps | null;
}>();

const router = useRouter();
const userStore = useUserStore();

const handleLogout = () => {
  userStore.logout();
  createMessage("退出登录成功，2秒后跳转到首页", "success", 2000);
  setTimeout(() => {
    router.push("/");
  }, 2000);
};
</script>

<style scoped>
.global-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  margin-bottom: 24px;
  background-color: rgb(13, 110, 253);
  color: #fff;

  .inner {
    display: flex;
    justify-content: space-between;
    width: 1200px;
  }

  a {
    color: #fff;
  }

  .logo {
    font-size: 20px;
  }

  .login-btns {
    display: flex;

    li {
      margin-left: 8px;
    }

    a {
      border: 1px solid #f8f9fa;
      color: #f8f9fa;

      &:hover {
        background-color: #f8f9fa;
        color: #000;
      }
    }
  }

  .dropdown-wrap {
    border: 1px solid #fff;

    .dropdown-item a {
      display: block;
      padding: 6px 16px;
      color: #000;
      text-align: left;

      &:hover {
        background-color: #efefef;
      }
    }
  }
}
</style>
